<template>
  <div class="oil-item" style="width: 650px;">
    <el-form 
      :model="fm.ps" 
      :ref="fm.fname" 
      label-width="100px" 
      size="medium"
      style="margin-top: 10px">
      <el-row>
        <el-col :span="12">
          <el-form-item 
            label="加油日期" 
            prop="jyDate" 
            :rules="[{ required: true, message: '加油日期不能为空', trigger: 'blur' }]">
            <el-date-picker
              clearable
              style="width: 100%"
              v-model="fm.ps.jyDate"
              type="date"
              placeholder="请选择加油日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item 
            label="报账车辆" 
            prop="plateNum" 
            :rules="[{ required: true, message: '报账车辆不能为空', trigger: 'blur' }]">
            <el-select 
              style="width: 100%" 
              v-model="fm.ps.plateNum" 
              clearable filterable 
              placeholder="请搜索选择报账车辆">
              <el-option 
                v-for="item in carNumList" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item 
            label="报账驾驶员" 
            prop="driverUname"
            :rules="[{ required: true, message: '报账驾驶员不能为空', trigger: 'blur' }]">
            <el-select 
              style="width: 100%" 
              v-model="fm.ps.driverUname" 
              clearable filterable 
              placeholder="请搜索选择报账驾驶员">
              <el-option 
                v-for="it in driverList"
                :key="it.uname"
                :label="it.realName"
                :value="it.uname">
                <span>{{it.realName}}</span>
                <span>{{it.phone}}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item 
            label="车辆公里数" 
            prop="currKm"
            :rules="[
              {required: true, message: '公里数不能为空', trigger: 'blur'},
              this.$rules.isPosInt('公里数必须大于0')
            ]">
            <el-input 
              placeholder="请输入车辆公里数" 
              v-model="fm.ps.currKm">
              <b slot="suffix" class="c-black">公里</b>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item 
            label="加油方式" 
            prop="jyWay" 
            :rules="[{ required: true, message: '加油方式不能为空', trigger: 'blur' }]">
            <el-select 
              style="width: 100%" 
              v-model="fm.ps.jyWay" 
              clearable 
              placeholder="请选择加油方式">
              <el-option label="现金加油" value="XJ_JY"></el-option>
              <el-option label="油票加油" value="YP_JY"></el-option>
              <el-option label="油罐车加油" value="YGC_JY"></el-option>
              <el-option label="油卡加油" value="CZK_JY"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item v-if="fm.ps.jyWay != 'XJ_JY'"
            label="加油站点" 
            prop="jyStationId"
            :rules="[{ required: true, message: '加油站点不能为空', trigger: 'blur' }]">
            <el-select 
              style="width: 100%" 
              v-model="fm.ps.jyStationId" 
              clearable 
              placeholder="请搜索选择加油站点">
              <el-option 
                v-for="item in oilOptions"
                :key="item.id"
                :label="item.unitName"
                :value="item.id">
                <span>{{item.unitName}}</span>
                <span>{{item.baseUserId.realName}}-{{item.baseUserId.phone}}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-else
            label="加油金额" 
            prop="jyMoney" 
            :rules="[
              { required: true, message: '加油金额不能为空', trigger: 'blur' },
              this.$rules.isFloat('加油金额必须大于0')
            ]">
            <el-input 
              placeholder="请输入车辆加油金额" 
              v-model="fm.ps.jyMoney"
              @blur="jyMoneyOnBlur">
              <b slot="suffix" class="c-black">元</b>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="fm.ps.jyWay != 'XJ_JY'">
        <el-col :span="12">
          <el-form-item 
            label="加油数量" 
            prop="jyCount"
            :rules="[{ required: true, message: '加油数量不能为空', trigger: 'blur' }]">
            <el-input 
              placeholder="请输入车辆加油数量" 
              v-model="fm.ps.jyCount">
              <b slot="suffix" class="c-black">升</b>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item 
            label="加油金额" 
            prop="jyMoney" 
            :rules="[
              { required: true, message: '加油金额不能为空', trigger: 'blur' },
              this.$rules.isFloat('加油金额必须大于0')
            ]">
            <el-input 
              placeholder="请输入车辆加油金额" 
              v-model="fm.ps.jyMoney"
              @blur="jyMoneyOnBlur">
              <b slot="suffix" class="c-black">元</b>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item 
            label="实付金额" 
            prop="realMoney" 
            :rules="[
              { required: true, message: '实付金额不能为空', trigger: 'blur' },
              this.$rules.isFloat('实付金额必须大于0')
            ]">
            <el-input 
              placeholder="请输入加油实付金额" 
              v-model="fm.ps.realMoney">
              <b slot="suffix" class="c-black">元</b>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item 
            label="小票上传" 
            prop="jyUrl" 
            :rules="[{ required: true, message: '加油凭证不能为空', trigger: 'blur' }]">
            <UploadImg
              imgName="routeVoucherUrl"
              @getImgUrl="setImgUrl"
              url="/company/upload"
              :src="fileBaseUrl+fm.ps.jyUrl"
              :ps="{userName: uname}"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item 
            label="加油备注" 
            prop="jyRemark" 
            :rules="[{ required: false, message: '加油备注不能为空', trigger: 'blur' }]">
            <el-input 
              type="textarea"
              placeholder="请填写加油备注" 
              v-model="fm.ps.jyRemark"
              show-word-limit
              maxlength="100"
              :rows="4"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="fm-btn-row">
      <el-button 
        :loading="fm.sb.load" 
        type="primary" 
        icon="el-icon-s-claim" 
        @click="onSubmit">
        {{fm.sb.text}}
      </el-button>
    </div>

  </div>
</template>

<script>
import {mapGetters} from "vuex";

import UploadImg from '@/components/UploadImg';

import * as commonSer from "@/api/services/common.service";
import * as orderSer from "@/api/services/order.service";
import * as logisticsSer from "@/api/services/logistics.service";

export default {
  name: "OilItem",
  props: {myData: Object},
  computed: {
    ...mapGetters(["uname"]),
  },
  components: {UploadImg},
  data() {
    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,

      fm: {
        fname: 'oilItemFm',
        sb: {load: false, text: '提交申请'},
        ps: {
          // 修改记账记录id
          uid: '', 
          // 车辆当前公里数
          currKm: '', 
          // 驾驶员账号
          driverUname: '',
          // 车牌号 
          plateNum: '',
          // 加油日期 
          jyDate: '', 
          // 加油数量
          jyCount: '', 
          // 加油金额
          jyMoney: '', 
          // 加油备注
          jyRemark: '', 
          // 加油站，客户类型为加油站的客户id
          jyStationId: '', 
          // 加油图片url
          jyUrl: '', 
          // 加油方式
          jyWay: '', 
          // 实付金额
          realMoney: '', 
        }
      },

      // 加油站-选择数据
      oilOptions: [],
      // 车牌号-选择数据
      carNumList: [], 
      // 驾驶员-选择数据
      driverList: [], 
    }
  },
  created() {
    console.log('加油报账父级数据:', this.myData);
    const that = this, ps = that.fm.ps, o = that.myData?.obj;

    // 回填数据
    if (o) {
      // 修改记账记录id
      ps.uid = o.id;
      // 车辆当前公里数
      ps.currKm = o.driverJzRecordId.currentKilo;
      // 驾驶员账号
      ps.driverUname = o.reimUser?.uname || '';
      // 车牌号 
      ps.plateNum = o.plateNum;
      // 加油日期 
      ps.jyDate = o.payDate;
      // 加油数量
      ps.jyCount = o.driverJzRecordId.oilRise;
      // 加油金额
      ps.jyMoney = o.payMoney;
      // 加油备注
      ps.jyRemark = o.remark;
      // 加油站，客户类型为加油站的客户id
      ps.jyStationId = o.driverJzRecordId.stationCustomer?.id;
      // 加油图片url
      ps.jyUrl = o.reimVoucherUrl.indexOf('=') != -1 ? '/kcbFiles'+o.reimVoucherUrl.split('=')[1] : o.reimVoucherUrl;
      // 加油方式
      ps.jyWay = o.driverJzRecordId.oilWay;
      // 实付金额
      ps.realMoney = o.driverJzRecordId.oilRealMoney; 
    }

    // 初始化-基础数据
    this.init();
  },
  methods: {
    init() {
      // 获取-车牌号-选择数据
      logisticsSer.getAllPlateNum({status: 0}).then(res => {
        if(res?.plateNums) this.carNumList = Object.keys(res.plateNums).map((item) => ({
          label: item, value: item,
        }));
      });

      // 获取-驾驶员-选择数据
      commonSer.getDriverDict({}).then((res) => {
        if(res?.data) this.driverList = res.data || [];
      });

      // 获取-加油站-选择数据
      commonSer.getCompanyCusList({cusType: 'OILSTATION'}).then(res => {
        if(res?.data) this.oilOptions = res.data;
      });
    },

    // 处理-加油金额-失焦事件
    jyMoneyOnBlur() {
      // 默认加油金额与实际金额一样
      this.fm.ps.realMoney = this.fm.ps.jyMoney;
    },

    // 设置-图片选择地址
    setImgUrl(data) {
      this.fm.ps.jyUrl = data.url;
    },

    // 提交表单
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);

      console.log('初始提交参数', ps);
      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          sb.load = true;

          orderSer.adupOilReim(ps).then(res => {
            sb.load = false;

            if (res.code !== 1) {
              U.qerror(res.msg);
            }else{
              U.qsuccess(res.msg);

              that.$emit("closeMd");
              that.$emit("reloadDg");
            }
          });
        }
      });
    },



  }
}
</script>